<template>
  <div class="classify">
    <!-- 头部组件 -->
    <div>
      <van-nav-bar :title="title" left-arrow fixed placeholder z-index="9" />
    </div>
    <!-- tab -->
    <van-tabs v-model:active="active" swipeable ellipsis lazy-render shrink title-active-color="#f6d3ae" title-inactive-color="#999999" >
      <van-tab v-for="ind in 3" :key="ind" :title="'影视' + ind" >
        <div class="tab-content">
          <!-- 类型 tag -->
          <div>
            <class-tag-vue @update:tag="activeTag = $event" :tagList="tagList" @choiceEvent="choiceEvent"/>
          </div>
          <!-- main card -->
          <div class="classify-card-box">
            <class-card-vue />
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import classTagVue from './components/classTag.vue'
import classCardVue from './components/classCard.vue'
export default {
  name: 'classify',
  components: {
    classCardVue,
    classTagVue
  },
  props: {
    // 标题
    title: {
      type: String,
      default: '全部分类'
    },
    //当前分类id
    id: {
      type: Number
      // required:true
    }
  },
  setup() {
    const data = reactive({
      active: 0,
      activeTag: 0,

      //类型标签数据
      tagList: [
        {
          id: 1,
          list: [
            { content: '综合排序', id: 1 },
            { content: '最多播放', id: 2 },
            { content: '最近更新', id: 3 },
            { content: '即将上映', id: 4 },
            { content: '最多好评', id: 5 },
            { content: '最多好评', id: 6 }
          ]
        },
        {
          id: 2,
          list: [
            { content: '全部地区', id: 7 },
            { content: '中国大陆', id: 8 },
            { content: '中国台湾', id: 9 },
            { content: '俄罗斯', id: 10 },
            { content: '美国', id: 11 }
          ]
        },
        {
          id: 3,
          list: [
            { content: '全部地区', id: 12 },
            { content: '中国大陆', id: 13 },
            { content: '中国台湾', id: 14 },
            { content: '俄罗斯', id: 15 },
            { content: '美国', id: 16 }
          ]
        }
      ]
    })
    //返回选中的各种类型
    function choiceEvent(choiceList){
      console.log(choiceList)
    }

    /**
     * 处理tag切换
     * */
    // watch(
    //   () => data.activeTag,
    //   (newVal, oldVal) => {}
    // )
    /**
     * 处理tab切换
     * */
    // watch(
    //   () => data.active,
    //   (newVal, old) => {}
    // )
    onBeforeMount(() => {})
    onMounted(() => {})
    return {
      ...toRefs(data),choiceEvent
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .van-tab--shrink{
  margin-right: 20px;
}
::v-deep .van-tabs__wrap{
  height: 30px;
}
::v-deep .van-tabs__line{
  background-color: #f6d3ae;
}
.classify {
  & > * {
    box-sizing: border-box;
  }
  width: 100%;
  // height: 100vh;
  box-sizing: border-box;
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  .tab-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    .classify-card-box {
      position: relative;
      overflow-y: scroll;
    }
  }
  // 组件样式修改
  .van-tabs {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    ::v-deep .van-tabs__wrap {
      flex-shrink: 0;
    }
    ::v-deep .van-tab__panel {
      height: 100%;
    }
    .van-tabs__content .van-tabs__content--animated {
      position: relative;
      overflow: hidden;
      height: 100%;
    }
  }
}
</style>